<template>
  <section class="msite">
    <!--首页头部-->
    <HeaderTop :title="address.name">
      <span class="header_search" slot="left">
        <div @click="location" class="animated zoomInUp">
          <span class="iconfont icon-diliweizhi"></span>
        </div>
        <section v-if="gavin">
          <div class="box"></div>
          <div class="boxone">
            {{address.city}}
          </div>
        </section>
      </span>

      <span class="header_login" slot="right" @click="go('/login')" v-if="!userLogin._id">
        <span class="header_login_text">登录|注册</span>
      </span>
      <span class="header_login" slot="right" @click="go('/personal')" v-else>
           <i class="iconfont icon-wode"></i>
      </span>
    </HeaderTop>
    <!--搜索-->
      <Search/>

    <!--首页导航，banner轮播-->
    <Banner/>
    <!--首页附近商家-->
    <div class="msite_shop_list">
      <div class="shop_header">
        <i class="iconfont icon-dizhiguanli"></i>
        <span class="shop_header_title">附近商家</span>
      </div>
      <Shop/>
    </div>
  </section>
</template>

<script>
  import HeaderTop from '../../components/Header/Header.vue'  //引入头部组件
  import Search from '../../components/Search/Search.vue'
  import Banner from '../../components/Banner/Banner.vue' //导入banner组件
  import Shop from '../../components/Shop/Shop.vue';//引入Shop组件
  import {mapState} from 'vuex'; //引入vuex的state

  export default {
    data(){
      return {
        gavin: false
      }
    },
    mounted(){
      this.$store.dispatch('getAddress')
      this.$store.dispatch('getShops')

    },
    methods:{
      go(path){
        this.$router.replace(path)
      },
      //
      location(){
        if(this.gavin === false){
          this.gavin = !this.gavin
          setTimeout(() => {
            this.gavin = !this.gavin
          },3000)
        }

      }
    },
    computed: {
      ...mapState(['address','userLogin'])
    },
    components: {
      HeaderTop,
      Banner,
      Shop,
      Search
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import '../../common/stylus/minxins.styl';
  .msite  //首页
    width 100%
    position absolute
    top 0
    .msite_shop_list
      top-border-1px(#e4e4e4)
      margin-top .37rem
      background #fff
      .shop_header
        padding .37rem .37rem 0
        .shop_icon
          margin-left .18rem
          color #999
        .shop_header_title
          color #999
          font-size .52rem
          line-height .75rem
  .box
    width:0;
    height:0;
    border-width:0 .375rem .75rem;
    border-style:solid;
    border-color:transparent transparent #000;/*透明 透明  灰*/
    opacity .6
  .boxone
    width 7.5rem
    height 1.5rem
    background #000
    margin-left -0.375rem
    border-radius 0.375rem
    color #fff
    text-align center
    line-height 1.5rem
    opacity .6
  .icon-wode,
  .icon-diliweizhi
    font-size 1rem
    color #fff



</style>
